<template>
	<view class="scroll-page">
		<scroll-view scroll-y="true" class="scroll" :style="[tStyle]" @scrolltoupper="scrolltoupper" @scrolltolower="scrolltolower">
			<view>
				<slot name="top">
					<!-- 内容区 -->
				</slot>
			</view>
		</scroll-view>
		<view class="spbottom" :style="[bStyle]">
			<slot name="bottom"></slot>
		</view>
	</view>
</template>

<script>
	/**
	 * 全屏滚动布局 上下固定
	 * bottomHeight [Number|String] 底部高度 可% 字符串(px) 数字(px)
	 */
	export default {
		props:{
			pos:{ // 固定区域
				type:String,
				default: 'bottom' // bottom top left right 固定区域
			},
			bottomHeight:{
				type: [Number|String],
				default: 56
			}
		},
		computed:{
			height(){
				let h = ''
				const bh = this.bottomHeight
				if(typeof bh === 'number'){
					h = bh + 'px'
				}else if(bh.indexOf('%') != -1 || bh.indexOf('px') != -1){
					h = bh
				}else{
					h = bh + 'px'
				}
				return h
			},
			tStyle(){
				const style = {
					height:`calc(100% - ${this.height})`
				}
				if(this.pos === 'bottom'){}
				if(this.pos === 'top'){
					style['position'] = 'absolute'
					style['top'] = this.height
					style['width'] = '100%'
				}
				return style
			},
			bStyle(){
				const style = {
					height: this.height
				}
				if(this.pos === 'bottom'){}
				if(this.pos === 'top'){
					style['position'] = 'absolute'
					style['top'] = `0px`
					style['width'] = '100%'
				}
				return style
			}
		},
		data() {
			return {
				
			}
		},
		methods:{
			scrolltolower(e){ // 滚动到底部/右边，
				this.$emit('scrollBR',e)
			},
			scrolltoupper(e){ // 滚动到顶部/左边
				this.$emit('scrollTL',e)
			}
		}
	}
</script>

<style scoped>
	.scroll-page{
		height: 100%;
		width: 100%;
		position: absolute;
	}
	.spbottom{
		overflow: hidden;
	}
</style>
